<template>
  <div
    class="imageListComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.contentPaddingTop + 'px',
      paddingBottom: oItem.main.contentPaddingBottom + 'px',
      paddingLeft: oItem.main.contentPaddingLR + 'px',
      paddingRight: oItem.main.contentPaddingLR + 'px',
    }"
  >
    <img
      class="item"
      v-for="(imc, imcIndex) in oItem.main.carouselContentList"
      :key="imc.id"
      :src="imc.imgUrl ? imc.imgUrl : imc.default"
      :style="{
        borderTopLeftRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderTopRightRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderBottomRightRadius: oItem.main.contentBorderRadiusBottom + 'px',
        borderBottomLeftRadius: oItem.main.contentBorderRadiusBottom + 'px',
        marginBottom:
          (imcIndex == oItem.main.carouselContentList.length - 1
            ? 0
            : oItem.main.contentImageMarginTB) + 'px',
        height: imc.height + 'px',
      }"
      alt=""
    />
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "imageListComponent",
  data() {
    return {
      oItem: null,
    };
  },
  props: ["item", "ename", "id"],
  // import引入的组件, 需要注入到对象中才能使用
  components: {},
  // 生命周期 - 创建完成, 可以访问当前this实例
  created() {},
  // 生命周期 - 挂载完成, 可以访问DOM元素
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    
  },
  //方法集合
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  // 监听属性, 类似于data概念
  computed: mapState(["decorate"]),
  // 监听data中的数据变化
  watch: {},
  //如果页面有keep-alive缓存功能, 这个函数会触发
  activated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
};
</script>
<style scoped lang="scss">
.imageListComponent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img.item {
    width: 100%;
    height: auto;
    display: flex;
    display: block;
  }
}
</style>
<style lang="scss">
.imageListComponent {
}
</style>
